<template>
  <div class="cus-image" :style="width + ';' + height">
    <el-image
        style="width: 100%; height: 100%"
        :src="src"
        :fit="fit"
        :alt="alt"
        :referrerPolicy="referrerPolicy"
        :zIndex="zIndex"
        :preview-src-list="previewSrcList"
        @click="cusPreviewImage"
        ref="previewImg"
    >
    </el-image>
    <span
        class="el-image-viewer__btn el-image-viewer__download"
        v-show="dnFlag"
        @click="dnImage"
    >
        <i class="el-icon-download"></i>
    </span>
  </div>
</template>
<script>
export default {
    name: "cusImage",
    data() {
        return {
            dnFlag: false,
            wrapperElem: null,
            hidElClassNameLists: [
                // "el-image-viewer__mask",
                // "el-image-viewer__btn el-image-viewer__close",
                // "el-icon-close",
                "el-icon-circle-close"
            ],
        };
    },
    props: {
        src: {
            type: String,
            default: "",
        },
        previewSrcList: {
            type: Array,
            default: function () {
                return [];
            },
        },
        width: {
            type: String,
            default: "100%",
        },
        height: {
            type: String,
            default: "100%",
        },
        fit: {
            type: String,
            default: "",
        },
        alt: {
            type: String,
            default: "",
        },
        referrerPolicy: {
            type: String,
            default: "",
        },
        zIndex: {
            type: Number,
            default: 2000,
        },
    },
	methods: {
        cusPreviewImage() {
            this.dnFlag = true;
            this.$refs.previewImg.showViewer = true
            this.checkElemlents();
        },
        checkElemlents() {
            this.$nextTick(() => {
                let wrapper = document.getElementsByClassName(
                    "el-image-viewer__wrapper"
                );
                if (wrapper.length > 0) {
                    this.wrapperElem = wrapper[0];
                    this.cusClickHandler();
                } else {
                    this.checkElemlents();
                }
            });
        },
        cusClickHandler() {
            this.wrapperElem.addEventListener("click", this.hideCusBtn);
        },
        hideCusBtn(e) {
            let className = e.target.className;
            if (this.hidElClassNameLists.includes(className)) {
                this.dnFlag = false;
            }
        },
        dnImage() {
            let imgUrl = document.getElementsByClassName(
                "el-image-viewer__canvas"
            )[0].children[0].src;
            this.downloadImage(imgUrl);
        },
        // 下载图片
        downloadImage(imgUrl) {
            this.$emit("onload");
            // let tmpArr = imgUrl.split("/");
            // let fileName = tmpArr[tmpArr.length - 1];
            // window.URL = window.URL || window.webkitURL;
            // var xhr = new XMLHttpRequest();
            // xhr.open("get", imgUrl, true);
            // // 至关重要
            // xhr.responseType = "blob";
            // xhr.onload = function () {
            //     if (this.status == 200) {
            //         //得到一个blob对象
            //         var blob = this.response;
            //         var fileUrl = window.URL.createObjectURL(blob);
            //         var a = document.createElement("a");
            //         (document.body || document.documentElement).appendChild(a);
            //         a.href = fileUrl;
            //         if ("download" in a) {
            //             a.download = fileName;
            //         } else {
            //             a.setAttribute("download", fileName);
            //         }
            //         a.target = "_self";
            //         a.click();
            //         a.remove();
            //     }
            // };
            // xhr.send();
        },
    },
};
</script>
<style scoped lang="scss">
.cus-image {
    display: inline-block;
    .el-image-viewer__download {
	    top: 40px;
        right: 100px;
        width: 40px;
        height: 40px;
        font-size: 24px;
        color: #fff;
        background-color: #606266;
        z-index: 2001; /* 如果该组件需要传递 z-index 的值，这个值也需要做成动态的 props */
        cursor: pointer;
        position: fixed;
    }
}
</style>
